<template>
    <view class="vote-from">
            <text class="vote-from-title">
                解聘/选聘物业服务企业或者其他管理人
            </text>
            <view class="vote-from-content">
                <view class="vote-from-content-title">
                  <!-- 1、是否同意续聘深圳幸福物业有限公司。并授权业主委员会与其签订物业服务合同 -->
                </view>
                <view class="vote-from-content-item">
                    <VoteFromItem
                    :optionId="item.optionId"
                      :isVotingInfo="isVotingInfo"
                      :voteNum="item.voteNum"
                      :areaNum="item.areaNum"
                      v-for="(item, idx) in voteOptions"
                      :key="idx"
                      :checked="isRadio ? selectedIndex.includes(idx) : selectedIndex[0] === idx"
                      :label="item.name"
                      :optionInfo="optionInfo"
                      @change="handleSelect(idx)"
                    
                    />
                  
                </view>
            </view>
    </view>
</template>

<script>
import VoteFromItem from './VoteFromItem.vue'
export default {
    props:{
        voteOptions:{
            deep:true,
            type:Array,
            default:()=>[]
        },
        optionInfo:{
            deep:true,
            type:Object,
            default:()=>{}
        },
               
        isVotingInfo:{
            immediate:true,
            deep:true,
            type:Object,
            default:()=>{}
        }
    },
    watch:{
        isVotingInfo:{
            handler(newVal){
               this.isChecked()
            },
            deep:true,
            immediate:true
        },
        optionInfo:{
            handler(newVal){
            
           if(newVal.voteRule==2||newVal.voteRule==4){ //判断是否为多选
              this.isRadio=true
           }else{
              this.isRadio=false
           }
            },
            deep:true,
            immediate:true
        }
    },
    components:{
        VoteFromItem
    },
    name: 'VoteFrom',
    data(){
        return {
            selectedIndex: [],
            isRadio:false //true为多选 false为单选
        }
    },
    methods: {
        clear(){
            this.selectedIndex=[]
        },
        getSelectedIndex(){
            if(this.isRadio){
               const rows =this.voteOptions.filter((item,key)=>this.selectedIndex.includes(key))
            //    let rows= this.voteOptions.filter((item,key)=>this.isVotingInfo.optionId.includes(item.optionId))
               return rows
            }else{
                
                let row=this.voteOptions.find((item,key)=>key==this.selectedIndex[0])
                return [row]
            }
        },
        isChecked(){
         
            if(this.isVotingInfo.isVoting){
             let row=this.isVotingInfo.optionId
            
                if(Array.isArray(row)&&row.length>1){
                    
                  
                    this.selectedIndex=row.map(e=>this.voteOptions.findIndex(item=>item.optionId==e))
                }else{
                    
                    this.voteOptions.forEach((item,key)=>{
                    if(item.optionId==this.isVotingInfo.optionId){
                        this.selectedIndex=[key]
                    }
                })
                }
               
               
               
            }
        },
      handleSelect(idx) {
        if(this.isVotingInfo.status==1&&!this.isVotingInfo.isVoting){
        if (this.isRadio) {
          // 多选
          const index = this.selectedIndex.indexOf(idx)
          if (index > -1) {
            // 已选中则取消
            this.selectedIndex.splice(index, 1)
          } else {
            // 未选中则添加
            this.selectedIndex.push(idx)
          }
          // 传递所有选中的 optionId
          const selectedItems =this.voteOptions.filter((item,key)=>this.selectedIndex.includes(key))
       
         this.$emit("input", selectedItems)
        } else {
          // 单选
          let row=this.voteOptions.find((item,key)=>key==idx)
          this.selectedIndex = [idx]
          this.$emit("input", [row])
        }
      }
      }
    }
}
</script>
<style lang="scss" scoped>
.vote-from{
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 18rpx;
    padding:30rpx 20rpx ;
    margin: 0 4rpx;
    box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0,0,0,0.03);
   margin-top: 20rpx;
    border-radius: 16rpx ;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
        &-title{
            border-radius: 8rpx;
            border: 1rpx solid rgba(155,142,142,0.5);
            padding: 12rpx 18rpx;
          
        }
        &-content{
           width: 100%;
           margin-top: 20rpx;
           &-title{
            font-weight: 600;
            font-size: 30rpx;
            color: #000000;
           }
           &-item{
            width: 100%;
            margin-top: 20rpx;
         
           }
        }
    
}
</style>
